<template>
  <div>
    <div class="pageTitleWhole">
      <div style="color:#1890FF;float:left;margin-right:15px;cursor:pointer">
        <router-link :to="`/orderCenter/orderManage?f=1`">
          <a-icon type="left" />返回
        </router-link>
      </div>
      <a-breadcrumb :routes="routes">
        <template slot="itemRender" slot-scope="{ route, routes, paths }">
          <span v-if="routes.indexOf(route) === routes.length - 1">{{ route.breadcrumbName }}</span>
          <router-link v-else :to="`${basePath}/${paths.join('/')}`">{{ route.breadcrumbName }}</router-link>
        </template>
      </a-breadcrumb>
    </div>
    <div class="voyageDE">
      <div class="voyageDETitle">
        <h3>
          <img src="../../../static/images/voyage-icon.png" alt srcset />
          公司编号：{{shipOrderInfo.shipOrderCode}}
        </h3>
        <a-select
          v-model="shipOrderInfo.isCostRecorded"
          @change="feeChange"
          :disabled="!btnControl.editCostRecorded ? true : feeChangeStatus"
          style="width:135px;"
        >
          <a-select-option :value="0">费用未录完</a-select-option>
          <a-select-option :value="1">费用已录完</a-select-option>
        </a-select>
        <div
          v-if="!btnControl.editCostRecorded"
          style="color:red;margin-left:10px;line-height:30px"
        >*您无此权限！</div>
      </div>
      <a-row>
        <a-col :span="20">
          <a-descriptions style="margin-left:60px">
            <a-descriptions-item label="公司名称">
              <a @click="company(shipOrderInfo.custId)">{{shipOrderInfo.custName}}</a>
            </a-descriptions-item>
            <a-descriptions-item label="联系人">{{shipOrderInfo.linkMan}}</a-descriptions-item>
            <a-descriptions-item label="联系电话">{{shipOrderInfo.linkManPhone}}</a-descriptions-item>
            <a-descriptions-item label="所属销售">{{shipOrderInfo.seller}}</a-descriptions-item>
            <template>
              <a-descriptions-item
                v-if="shipOrderInfo.orderType === 'DOMESTIC_TRADE_EXPORTS'"
                label="订单类型"
              >内贸出口订单</a-descriptions-item>
              <a-descriptions-item
                v-else-if="shipOrderInfo.orderType === 'DOMESTIC_TRADE_IMPORTS'"
                label="订单类型"
              >内贸进口订单</a-descriptions-item>
              <a-descriptions-item
                v-else-if="shipOrderInfo.orderType === 'FOREIGN_TRADE_EXPORTS'"
                label="订单类型"
              >外贸出口订单</a-descriptions-item>
              <a-descriptions-item
                v-else-if="shipOrderInfo.orderType === 'FOREIGN_TRADE_IMPORTS'"
                label="订单类型"
              >外贸进口订单</a-descriptions-item>
              <a-descriptions-item
                v-else-if="shipOrderInfo.orderType === 'UNITED_TRANSPORT_EXPORTS'"
                label="订单类型"
              >联运出口订单</a-descriptions-item>
              <a-descriptions-item
                v-else-if="shipOrderInfo.orderType === 'UNITED_TRANSPORT_IMPORTS'"
                label="订单类型"
              >联运进口订单</a-descriptions-item>
            </template>
            <a-descriptions-item label="箱型箱量">{{shipOrderInfo.containerType}} * 1</a-descriptions-item>
            <a-descriptions-item label="货名">{{shipOrderInfo.goodsName}}</a-descriptions-item>
            <a-descriptions-item
              label="创建日期"
            >{{shipOrderInfo.createTime ? shipOrderInfo.createTime : '--'}}</a-descriptions-item>
            <a-descriptions-item
              label="完成日期"
            >{{shipOrderInfo.completeTime ? shipOrderInfo.completeTime : '--'}}</a-descriptions-item>
          </a-descriptions>
        </a-col>
        <a-col :span="4">
          <div class="ddzx_orderzt">
            <div>
              <template v-if="shipOrderInfo.status === 1">
                <h2>进行中</h2>
                <div>
                  <span v-if="shipOrderInfo.isTrack === 1" style="color:#7CB305">
                    <img src="@@/images/order_zt9.png" alt class="zte" />今日已跟踪
                  </span>
                  <span v-else style="color:#7CB305">
                    <img src="@@/images/order_zt9.png" alt class="zte" />今日待跟踪
                  </span>
                </div>
                <div>
                  <span v-if="shipOrderInfo.releaseStatus === 1" style="color:#CF1322">
                    <img src="@@/images/order_zt10.png" alt class="zte" />扣货
                  </span>
                  <span v-else-if="shipOrderInfo.releaseStatus === 2" style="color:#1890ff;">
                    <img src="@@/images/order_zt11.png" alt class="zte" />可放货
                  </span>
                </div>
              </template>
              <template v-else-if="shipOrderInfo.status === 2">
                <h2>已完成</h2>
              </template>
              <template v-else-if="shipOrderInfo.status === 4">
                <h2>已结算</h2>
              </template>
              <template v-else>
                <h2 style="display:inline-block">{{shipOrderInfo.status === 3 ? '已完成-异常' : '已作废'}}</h2>
                <a-tooltip
                  placement="top"
                  :title="shipOrderInfo.abnormalReason"
                  :get-popup-container="getPopupContainer"
                >
                  <a-icon type="exclamation-circle" class="zted" />
                </a-tooltip>
              </template>
              <div style="margin-top:5px;">
                <!-- <span
                    v-if="shipOrderInfo.isDispatch === 1 && shipOrderInfo.isTruckOrderComplete === 0"
                    style="color:#1890ff;"
                  >
                    <img src="@@/images/order_zt2.png" alt class="zte" />已派单到陆运
                  </span>
                  <span v-else style="color:#1890ff;">
                    <img src="@@/images/order_zt1.png" alt class="zte" />未派单到陆运
                </span>-->
                <span v-if="shipOrderInfo.orderTruckStatus === 1" class="ddzx_zhuant">
                  <img src="@@/images/order_zt1.png" alt />
                  <span style="line-height:28px;">未派单到陆运</span>
                </span>
                <span v-if="shipOrderInfo.orderTruckStatus === 2" class="ddzx_zhuant">
                  <img src="@@/images/order_zt2.png" alt />
                  <span style="line-height:28px;">已派单到陆运</span>
                </span>
                <span v-if="shipOrderInfo.orderTruckStatus === 3" class="ddzx_zhuant">
                  <img src="@@/images/order_zt16.png" alt />
                  <span style="line-height:28px;">陆运中</span>
                </span>
                <span v-if="shipOrderInfo.orderTruckStatus === 4" class="ddzx_zhuant">
                  <img src="@@/images/order_zt17.png" alt />
                  <span style="line-height:28px;">陆运已完成</span>
                </span>
                <!-- <span v-if="shipOrderInfo.orderTruckStatus === 5" class="ddzx_zhuant">
                  <img src="@@/images/order_zt15.png" alt />
                  <span style="line-height:28px;">陆运已作废</span>
                </span>
                <span v-if="shipOrderInfo.orderTruckStatus === 6" class="ddzx_zhuant">
                  <img src="@@/images/order_zt14.png" alt />
                  <span style="line-height:28px;">陆运异常结束</span>
                </span>-->
              </div>
              <template
                v-if="shipOrderInfo.orderTruckStatus === 5 || shipOrderInfo.orderTruckStatus === 6 || shipOrderInfo.orderTruckStatus === 7"
              >
                <div style="margin-top:5px">
                  <span class="ddzx_zhuant">
                    <img src="@@/images/icon-1.png" alt />
                    <span style="line-height:28px;">{{shipOrderInfo.orderTruckStatusName}}</span>
                    <a-tooltip
                      placement="bottomRight"
                      :title="shipOrderInfo.orderTruckRemark || '--'"
                    >
                      <a-icon type="info-circle" style="color:#88C1FC" />
                    </a-tooltip>
                  </span>
                </div>
                <div style="margin-top:5px;color:#666">（{{shipOrderInfo.orderTruckTime || '--'}}）</div>
              </template>
              <template
                v-if="shipOrderInfo.orderTruckStatus === 2 || shipOrderInfo.orderTruckStatus === 4"
              >
                <div style="margin-top:5px;color:#666">（{{shipOrderInfo.orderTruckTime || '--'}}）</div>
              </template>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>
    <a-tabs
      :active-key="currentTab"
      :animated="false"
      style="min-height:550px;padding-bottom:20px;"
      @change="tabChange"
      class="chuanb"
    >
      <a-tab-pane :key="1" tab="订单信息">
        <a-card v-if="orderStatus" :bordered="false" class="orderCenterAntCard">
          <div class="card-title">
            订单信息
            <a-button type="primary" style="float:right" @click="editOrder">编辑</a-button>
          </div>
          <a-descriptions class="ddzxdetail_de">
            <a-descriptions-item
              label="结算类型"
            >{{checkSettlementTypeName(shipOrderInfo.settlementType)}}</a-descriptions-item>
            <a-descriptions-item
              label="是否开票"
            >{{shipOrderInfo.invoiceType === 1 ? '增值税专用发票' : '增值税普通发票'}} {{shipOrderInfo.taxRate}}%</a-descriptions-item>
            <a-descriptions-item label="操作员">{{shipOrderInfo.handler}}</a-descriptions-item>
            <a-descriptions-item
              label="驳船船名/航次"
            >{{shipOrderInfo.shipName || '--'}}/{{shipOrderInfo.voyageNumber || '--'}}</a-descriptions-item>
            <a-descriptions-item label="箱号">{{shipOrderInfo.containerNo || '--'}}</a-descriptions-item>
            <a-descriptions-item label="封号">{{shipOrderInfo.containerSealNo || '--'}}</a-descriptions-item>
            <a-descriptions-item
              label="海船船名/航次"
            >{{shipOrderInfo.seagoingShipName || '--'}}/{{shipOrderInfo.seagoingShipVoyage || '--'}}</a-descriptions-item>
            <a-descriptions-item label="持箱人">
              <!-- <template v-for="v in holderList">{{v.id === shipOrderInfo.holderId ? v.name : ''}}</template> -->
              {{shipOrderInfo.holder || '--'}}
            </a-descriptions-item>
            <a-descriptions-item label="运单号">{{shipOrderInfo.seagoingShipOrderCode || '--'}}</a-descriptions-item>
            <a-descriptions-item label="货重（吨）">{{shipOrderInfo.goodsWeight || '--'}}</a-descriptions-item>
            <a-descriptions-item label="运输条款">{{shipOrderInfo.transportTerms || '--'}}</a-descriptions-item>
            <a-descriptions-item label="装货日期">{{shipOrderInfo.loadingTime || '--'}}</a-descriptions-item>
            <a-descriptions-item label="海船起航日期">{{shipOrderInfo.departureDate || '--'}}</a-descriptions-item>
            <a-descriptions-item label></a-descriptions-item>
            <a-descriptions-item label></a-descriptions-item>
          </a-descriptions>
          <template>
            <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
              <!-- 门到门 -->
              <div
                v-if="shipOrderInfo.transportTerms=== 'DO-DO'"
                class="borderframe"
                style="margin:15px 30px;"
              >
                <!-- 起运信息 -->
                <div class="border">
                  <a-row>
                    <a-col :span="3" class="YunSHU">
                      <img src="@@/images/icon-start.png" alt style="margin-bottom:8px;" />
                      <div>起运信息</div>
                    </a-col>
                    <a-col :span="9">
                      <a-form-item label="起运港">
                        <!-- <template
                          v-for="(v) in portList"
                        >{{v.id === shipOrderInfo.startPortId ? `${v.name}` : ``}}</template>-->
                        <span>{{shipOrderInfo.startPortName}}</span>
                      </a-form-item>
                      <a-form-item label="联系人" style="margin-top:44px;">
                        <span>{{shipOrderInfo.consignor}}</span>
                      </a-form-item>
                    </a-col>
                    <a-col :span="12">
                      <a-form-item label="发货地址">
                        <span>{{`${shipOrderInfo.consignorProvince} ${shipOrderInfo.consignorCity} ${shipOrderInfo.consignorArea} | ${shipOrderInfo.consignorAddress}`}}</span>
                      </a-form-item>
                      <a-form-item label="联系电话">
                        <span>{{shipOrderInfo.consignorPhone}}</span>
                      </a-form-item>
                    </a-col>
                  </a-row>
                </div>
                <!-- 目的信息 -->
                <div class="border">
                  <a-row>
                    <a-col :span="3" class="YunSHU">
                      <img src="@@/images/icon-end.png" alt style="margin-bottom:8px;" />
                      <div>目的信息</div>
                    </a-col>
                    <a-col :span="9">
                      <a-form-item label="目的港">
                        <!-- <template
                          v-for="(v) in portList"
                        >{{v.id === shipOrderInfo.endPortId ? `${v.name}` : ``}}</template>-->
                        <span>{{shipOrderInfo.endPortName}}</span>
                      </a-form-item>
                      <a-form-item label="联系人" style="margin-top:44px;">
                        <span>{{shipOrderInfo.consignee}}</span>
                      </a-form-item>
                    </a-col>
                    <a-col :span="12">
                      <a-form-item label="收货地址">
                        <span>{{`${shipOrderInfo.consigneeProvince} ${shipOrderInfo.consigneeCity} ${shipOrderInfo.consigneeArea} | ${shipOrderInfo.consigneeAddress}`}}</span>
                      </a-form-item>
                      <a-form-item label="联系电话">
                        <span>{{shipOrderInfo.consigneePhone}}</span>
                      </a-form-item>
                    </a-col>
                  </a-row>
                </div>
              </div>
              <!-- 门到港 -->
              <div v-else-if="shipOrderInfo.transportTerms=== 'DO-CY'" class="borderframe">
                <!-- 起运信息 -->
                <div class="border">
                  <a-row>
                    <a-col :span="3" class="YunSHU">
                      <img src="@@/images/icon-start.png" alt style="margin-bottom:8px;" />
                      <div>起运信息</div>
                    </a-col>
                    <a-col :span="9">
                      <a-form-item label="起运港">
                        <!-- <template
                          v-for="(v) in portList"
                        >{{v.id === shipOrderInfo.startPortId ? `${v.name}` : ``}}</template>-->
                        <span>{{shipOrderInfo.startPortName}}</span>
                      </a-form-item>
                      <a-form-item label="联系人" style="margin-top:44px;">
                        <span>{{shipOrderInfo.consignor}}</span>
                      </a-form-item>
                    </a-col>
                    <a-col :span="12">
                      <a-form-item label="发货地址">
                        <span>{{`${shipOrderInfo.consignorProvince} ${shipOrderInfo.consignorCity} ${shipOrderInfo.consignorArea} | ${shipOrderInfo.consignorAddress}`}}</span>
                      </a-form-item>
                      <a-form-item label="联系电话">
                        <span>{{shipOrderInfo.consignorPhone}}</span>
                      </a-form-item>
                    </a-col>
                  </a-row>
                </div>
                <!-- 目的信息 -->
                <div class="border">
                  <a-row>
                    <a-col :span="3" class="YunSHU">
                      <img src="@@/images/icon-end.png" alt style="margin-bottom:8px;" />
                      <div>目的信息</div>
                    </a-col>
                    <a-col :span="9">
                      <a-form-item label="目的港">
                        <!-- <template
                          v-for="(v) in portList"
                        >{{v.id === shipOrderInfo.endPortId ? `${v.name}` : ``}}</template>-->
                        <span>{{shipOrderInfo.endPortName}}</span>
                      </a-form-item>
                      <a-form-item label="联系人" style="margin-top:44px;">
                        <span>{{shipOrderInfo.consignee}}</span>
                      </a-form-item>
                    </a-col>
                    <a-col :span="12">
                      <a-form-item label="收货人抬头">
                        <span>{{shipOrderInfo.consigneeTitle}}</span>
                      </a-form-item>
                      <a-form-item label="联系电话" style="margin-top:44px;">
                        <span>{{shipOrderInfo.consigneePhone}}</span>
                      </a-form-item>
                    </a-col>
                  </a-row>
                </div>
              </div>
              <!-- 港到门 -->
              <div v-else-if="shipOrderInfo.transportTerms=== 'CY-DO'" class="borderframe">
                <!-- 起运信息 -->
                <div class="border">
                  <a-row>
                    <a-col :span="3" class="YunSHU">
                      <img src="@@/images/icon-start.png" alt style="margin-bottom:8px;" />
                      <div>起运信息</div>
                    </a-col>
                    <a-col :span="9">
                      <a-form-item label="起运港">
                        <!-- <template
                          v-for="(v) in portList"
                        >{{v.id === shipOrderInfo.startPortId ? `${v.name}` : ``}}</template>-->
                        <span>{{shipOrderInfo.startPortName}}</span>
                      </a-form-item>
                      <a-form-item label="联系人" style="margin-top:44px;">
                        <span>{{shipOrderInfo.consignor}}</span>
                      </a-form-item>
                    </a-col>
                    <a-col :span="12">
                      <a-form-item label="联系电话">
                        <span>{{shipOrderInfo.consignorPhone}}</span>
                      </a-form-item>
                    </a-col>
                  </a-row>
                </div>
                <!-- 目的信息 -->
                <div class="border">
                  <a-row>
                    <a-col :span="3" class="YunSHU">
                      <img src="@@/images/icon-end.png" alt style="margin-bottom:8px;" />
                      <div>目的信息</div>
                    </a-col>
                    <a-col :span="9">
                      <a-form-item label="目的港">
                        <!-- <template
                          v-for="(v) in portList"
                        >{{v.id === shipOrderInfo.endPortId ? `${v.name}` : ``}}</template>-->
                        <span>{{shipOrderInfo.endPortName}}</span>
                      </a-form-item>
                      <a-form-item label="联系人" style="margin-top:44px;">
                        <span>{{shipOrderInfo.consignee}}</span>
                      </a-form-item>
                    </a-col>
                    <a-col :span="12">
                      <a-form-item label="收货地址">
                        <span>{{`${shipOrderInfo.consigneeProvince} ${shipOrderInfo.consigneeCity} ${shipOrderInfo.consigneeArea} | ${shipOrderInfo.consigneeAddress}`}}</span>
                      </a-form-item>
                      <a-form-item label="联系电话">
                        <span>{{shipOrderInfo.consigneePhone}}</span>
                      </a-form-item>
                    </a-col>
                  </a-row>
                </div>
              </div>
              <!-- 港到港 -->
              <div v-else-if="shipOrderInfo.transportTerms=== 'CY-CY'" class="borderframe">
                <!-- 起运信息 -->
                <div class="border">
                  <a-row>
                    <a-col :span="3" class="YunSHU">
                      <img src="@@/images/icon-start.png" alt style="margin-bottom:8px;" />
                      <div>起运信息</div>
                    </a-col>
                    <a-col :span="9">
                      <a-form-item label="起运港">
                        <!-- <template
                          v-for="(v) in portList"
                        >{{v.id === shipOrderInfo.startPortId ? `${v.name}` : ``}}</template>-->
                        <span>{{shipOrderInfo.startPortName}}</span>
                      </a-form-item>
                      <a-form-item label="联系人" style="margin-top:44px;">
                        <span>{{shipOrderInfo.consignor}}</span>
                      </a-form-item>
                    </a-col>
                    <a-col :span="12">
                      <a-form-item label="联系电话" style="margin-top:84px;">
                        <span>{{shipOrderInfo.consignorPhone}}</span>
                      </a-form-item>
                    </a-col>
                  </a-row>
                </div>
                <!-- 目的信息 -->
                <div class="border">
                  <a-row>
                    <a-col :span="3" class="YunSHU">
                      <img src="@@/images/icon-end.png" alt style="margin-bottom:8px;" />
                      <div>目的信息</div>
                    </a-col>
                    <a-col :span="9">
                      <a-form-item label="目的港">
                        <!-- <template
                          v-for="(v) in portList"
                        >{{v.id === shipOrderInfo.endPortId ? `${v.name}` : ``}}</template>-->
                        <span>{{shipOrderInfo.endPortName}}</span>
                      </a-form-item>
                      <a-form-item label="联系人" style="margin-top:44px;">
                        <span>{{shipOrderInfo.consignee}}</span>
                      </a-form-item>
                    </a-col>
                    <a-col :span="12">
                      <a-form-item label="收货人抬头">
                        <span>{{shipOrderInfo.consigneeTitle}}</span>
                      </a-form-item>
                      <a-form-item label="联系电话" style="margin-top:44px;">
                        <span>{{shipOrderInfo.consigneePhone}}</span>
                      </a-form-item>
                    </a-col>
                  </a-row>
                </div>
              </div>
            </a-form>
          </template>
          <!-- <a-descriptions :column="1" class="ddzxdetail_de1">
            <a-descriptions-item label="销售备注">{{shipOrderInfo.sellerRemark || '--'}}</a-descriptions-item>
            <a-descriptions-item label="操作备注">{{shipOrderInfo.handlerRemark || '--'}}</a-descriptions-item>
          </a-descriptions>-->
          <a-row class="ddzxdetail_de1" style="margin-top:20px">
            <a-col :span="2" style="color:#333;text-align:right">销售备注:</a-col>
            <a-col :span="20" style="padding-left:20px">{{shipOrderInfo.sellerRemark || '--'}}</a-col>
          </a-row>
          <a-row class="ddzxdetail_de1" style="margin-top:20px">
            <a-col :span="2" style="color:#333;text-align:right">操作备注:</a-col>
            <a-col :span="20" style="padding-left:20px">{{shipOrderInfo.handlerRemark || '--'}}</a-col>
          </a-row>
        </a-card>
        <a-card v-else :bordered="false" class="orderCenterAntCard">
          <div class="card-title">
            订单信息
            <a-button type="primary" style="float:right" @click="saveOrder">保 存</a-button>
            <a-button
              type="primary"
              ghost
              style="float:right;margin-right:20px"
              @click="cancelSave"
            >取 消</a-button>
          </div>
          <a-form-model
            ref="form"
            :model="form"
            :rules="rules"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
            class="ddzx_xqxx"
          >
            <a-row>
              <a-col :span="8">
                <a-form-model-item label="结算类型">
                  <span>{{checkSettlementTypeName(shipOrderInfo.settlementType)}}</span>
                </a-form-model-item>
                <a-form-model-item label="驳船船名/航次">
                  <span>{{shipOrderInfo.shipName}}/{{shipOrderInfo.voyageNumber}}</span>
                </a-form-model-item>
                <a-form-model-item label="海船船名/航次">
                  <a-input v-model="inputValue" placeholder="以 / 区分海船、航次" />
                </a-form-model-item>
                <a-form-model-item label="货重（吨）">
                  <a-input-number v-model="form.goodsWeight" style="width:100%" />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="是否开票">
                  <span>{{shipOrderInfo.invoiceType === 1 ? '增值税专用发票' : '增值税普通发票'}} {{shipOrderInfo.taxRate}}%</span>
                </a-form-model-item>
                <a-form-model-item label="箱号">
                  <a-input v-model="form.containerNo" @blur="checkContainerNoIsExist" />
                </a-form-model-item>
                <a-form-model-item label="持箱人">
                  <a-select v-model="form.holderId" style="width:200px;">
                    <a-select-option
                      v-for="(item,index) in holderList"
                      :key="index"
                      :value="item.id"
                    >{{item.name}}</a-select-option>
                  </a-select>
                </a-form-model-item>
                <a-form-model-item label="运输条款">
                  <span>{{shipOrderInfo.transportTerms}}</span>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="操作员">
                  <span>{{shipOrderInfo.handler}}</span>
                </a-form-model-item>
                <a-form-model-item label="封号">
                  <a-input v-model="form.containerSealNo" />
                </a-form-model-item>
                <a-form-model-item label="运单号">
                  <a-input v-model="form.seagoingShipOrderCode" />
                </a-form-model-item>
                <a-form-model-item label="装货日期" prop="loadingTime">
                  <a-date-picker
                    :value="form.loadingTime ? momentDate(form.loadingTime) : null"
                    @change="loadingTimeChange"
                    :show-time="{ format: 'HH:mm' }"
                    format="YYYY-MM-DD HH:mm"
                  >
                    <a-icon slot="suffixIcon" type="calendar" />
                  </a-date-picker>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="海船起航日期">
                  <a-date-picker
                    :value="form.departureDate ? momentDate(form.departureDate) : null"
                    @change="departureDateChange"
                    format="YYYY-MM-DD"
                  >
                    <a-icon slot="suffixIcon" type="calendar" />
                  </a-date-picker>
                </a-form-model-item>
              </a-col>
            </a-row>
            <template>
              <div
                v-if="shipOrderInfo.transportTerms=== 'DO-DO'"
                class="borderframe"
                style="margin:15px 30px;"
              >
                <!-- 起运信息 -->
                <div class="border">
                  <a-row>
                    <a-col :span="3" class="YunSHU">
                      <img src="@@/images/icon-start.png" alt style="margin-bottom:8px;" />
                      <div>起运信息</div>
                    </a-col>
                    <a-col :span="9">
                      <a-form-model-item label="起运港" prop="startPortId">
                        <!-- <a-select v-model="form.startPortId">
                          <a-select-option value>请选择</a-select-option>
                          <a-select-option
                            v-for="(item,index) in portList"
                            :key="index"
                            :value="item.id"
                          >{{item.name}}</a-select-option>
                        </a-select>-->
                        <a-select
                          show-search
                          :show-arrow="false"
                          :filter-option="false"
                          :default-active-first-option="false"
                          :not-found-content="null"
                          v-model="form.startPortId"
                          @search="startPortChange"
                          @select="portListReset"
                        >
                          <a-select-option key>请选择</a-select-option>
                          <a-select-option v-for="d in startPortList" :key="d.id">{{ d.name }}</a-select-option>
                        </a-select>
                      </a-form-model-item>
                      <a-form-model-item label="联系人" prop="consignor" style="margin-top:44px;">
                        <a-input v-model="form.consignor" :max-length="10" />
                      </a-form-model-item>
                    </a-col>
                    <a-col :span="12">
                      <a-form-model-item label="发货地址" prop="consignorProvince">
                        <a-cascader
                          :options="options"
                          v-if="form.consignorProvince"
                          :default-value="[form.consignorProvince, form.consignorCity, form.consignorArea]"
                          :fieldNames="{label: 'area', value: 'area', children: 'childList'}"
                          placeholder="请选择省/市/区县"
                          @change="onChange"
                        />
                      </a-form-model-item>
                      <a-form-model-item label="详细地址" prop="consignorAddress">
                        <a-input v-model="form.consignorAddress" :max-length="100" />
                      </a-form-model-item>
                      <a-form-model-item label="联系电话" prop="consignorPhone">
                        <a-input v-model="form.consignorPhone" :max-length="20" />
                      </a-form-model-item>
                    </a-col>
                  </a-row>
                </div>
                <!-- 目的信息 -->
                <div class="border">
                  <a-row>
                    <a-col :span="3" class="YunSHU">
                      <img src="@@/images/icon-end.png" alt style="margin-bottom:8px;" />
                      <div>目的信息</div>
                    </a-col>
                    <a-col :span="9">
                      <a-form-model-item label="目的港" prop="endPortId">
                        <!-- <a-select v-model="form.endPortId">
                          <a-select-option value>请选择</a-select-option>
                          <a-select-option
                            v-for="(item,index) in portList"
                            :key="index"
                            :value="item.id"
                          >{{item.name}}</a-select-option>
                        </a-select>-->
                        <a-select
                          show-search
                          :show-arrow="false"
                          :filter-option="false"
                          :default-active-first-option="false"
                          :not-found-content="null"
                          v-model="form.endPortId"
                          @search="endPortChange"
                          @select="portListReset"
                        >
                          <a-select-option key>请选择</a-select-option>
                          <a-select-option v-for="d in endPortList" :key="d.id">{{ d.name }}</a-select-option>
                        </a-select>
                      </a-form-model-item>
                      <a-form-model-item label="联系人" prop="consignee" style="margin-top:44px;">
                        <a-input v-model="form.consignee" :max-length="10" />
                      </a-form-model-item>
                    </a-col>
                    <a-col :span="12">
                      <a-form-model-item label="收货地址" prop="consigneeProvince">
                        <a-cascader
                          :options="options"
                          v-if="form.consigneeProvince"
                          :default-value="[form.consigneeProvince, form.consigneeCity, form.consigneeArea]"
                          :fieldNames="{label: 'area', value: 'area', children: 'childList'}"
                          placeholder="请选择省/市/区县"
                          @change="onChange2"
                        />
                      </a-form-model-item>
                      <a-form-model-item label="详细地址" prop="consigneeAddress">
                        <a-input v-model="form.consigneeAddress" :max-length="100" />
                      </a-form-model-item>
                      <a-form-model-item label="联系电话" prop="consigneePhone">
                        <a-input v-model="form.consigneePhone" :max-length="20" />
                      </a-form-model-item>
                    </a-col>
                  </a-row>
                </div>
              </div>
              <div v-else-if="shipOrderInfo.transportTerms=== 'DO-CY'" class="borderframe">
                <!-- 起运信息 -->
                <div class="border">
                  <a-row>
                    <a-col :span="3" class="YunSHU">
                      <img src="@@/images/icon-start.png" alt style="margin-bottom:8px;" />
                      <div>起运信息</div>
                    </a-col>
                    <a-col :span="9">
                      <a-form-model-item label="起运港" prop="startPortId">
                        <!-- <a-select v-model="form.startPortId">
                          <a-select-option value>请选择</a-select-option>
                          <a-select-option
                            v-for="(item,index) in portList"
                            :key="index"
                            :value="item.id"
                          >{{item.name}}</a-select-option>
                        </a-select>-->
                        <a-select
                          show-search
                          :show-arrow="false"
                          :filter-option="false"
                          :default-active-first-option="false"
                          :not-found-content="null"
                          v-model="form.startPortId"
                          @search="startPortChange"
                          @select="portListReset"
                        >
                          <a-select-option key>请选择</a-select-option>
                          <a-select-option v-for="d in startPortList" :key="d.id">{{ d.name }}</a-select-option>
                        </a-select>
                      </a-form-model-item>
                      <a-form-model-item label="联系人" prop="consignor" style="margin-top:44px;">
                        <a-input v-model="form.consignor" :max-length="10" />
                      </a-form-model-item>
                    </a-col>
                    <a-col :span="12">
                      <a-form-model-item label="发货地址" prop="consignorProvince">
                        <a-cascader
                          :options="options"
                          v-if="form.consignorProvince"
                          :default-value="[form.consignorProvince, form.consignorCity, form.consignorArea]"
                          :fieldNames="{label: 'area', value: 'area', children: 'childList'}"
                          placeholder="请选择省/市/区县"
                          @change="onChange"
                        />
                      </a-form-model-item>
                      <a-form-model-item label="详细地址" prop="consignorAddress">
                        <a-input v-model="form.consignorAddress" :max-length="100" />
                      </a-form-model-item>
                      <a-form-model-item label="联系电话" prop="consignorPhone">
                        <a-input v-model="form.consignorPhone" :max-length="20" />
                      </a-form-model-item>
                    </a-col>
                  </a-row>
                </div>
                <!-- 目的信息 -->
                <div class="border">
                  <a-row>
                    <a-col :span="3" class="YunSHU">
                      <img src="@@/images/icon-end.png" alt style="margin-bottom:8px;" />
                      <div>目的信息</div>
                    </a-col>
                    <a-col :span="9">
                      <a-form-model-item label="目的港" prop="endPortId">
                        <!-- <a-select v-model="form.endPortId">
                          <a-select-option value>请选择</a-select-option>
                          <a-select-option
                            v-for="(item,index) in portList"
                            :key="index"
                            :value="item.id"
                          >{{item.name}}</a-select-option>
                        </a-select>-->
                        <a-select
                          show-search
                          :show-arrow="false"
                          :filter-option="false"
                          :default-active-first-option="false"
                          :not-found-content="null"
                          v-model="form.endPortId"
                          @search="endPortChange"
                          @select="portListReset"
                        >
                          <a-select-option key>请选择</a-select-option>
                          <a-select-option v-for="d in endPortList" :key="d.id">{{ d.name }}</a-select-option>
                        </a-select>
                      </a-form-model-item>
                      <a-form-model-item label="联系人" prop="consignee" style="margin-top:44px;">
                        <a-input v-model="form.consignee" :max-length="10" />
                      </a-form-model-item>
                    </a-col>
                    <a-col :span="12">
                      <a-form-model-item label="收货人抬头" prop="consigneeTitle">
                        <a-input v-model="form.consigneeTitle" :max-length="50" />
                      </a-form-model-item>
                      <a-form-model-item
                        label="联系电话"
                        prop="consigneePhone"
                        style="margin-top:44px;"
                      >
                        <a-input v-model="form.consigneePhone" :max-length="20" />
                      </a-form-model-item>
                    </a-col>
                  </a-row>
                </div>
              </div>
              <div v-else-if="shipOrderInfo.transportTerms=== 'CY-DO'" class="borderframe">
                <!-- 起运信息 -->
                <div class="border">
                  <a-row>
                    <a-col :span="3" class="YunSHU">
                      <img src="@@/images/icon-start.png" alt style="margin-bottom:8px;" />
                      <div>起运信息</div>
                    </a-col>
                    <a-col :span="9">
                      <a-form-model-item label="起运港" prop="startPortId">
                        <!-- <a-select v-model="form.startPortId">
                          <a-select-option value>请选择</a-select-option>
                          <a-select-option
                            v-for="(item,index) in portList"
                            :key="index"
                            :value="item.id"
                          >{{item.name}}</a-select-option>
                        </a-select>-->
                        <a-select
                          show-search
                          :show-arrow="false"
                          :filter-option="false"
                          :default-active-first-option="false"
                          :not-found-content="null"
                          v-model="form.startPortId"
                          @search="startPortChange"
                          @select="portListReset"
                        >
                          <a-select-option key>请选择</a-select-option>
                          <a-select-option v-for="d in startPortList" :key="d.id">{{ d.name }}</a-select-option>
                        </a-select>
                      </a-form-model-item>
                      <a-form-model-item label="联系人" prop="consignor" style="margin-top:44px;">
                        <a-input v-model="form.consignor" :max-length="10" />
                      </a-form-model-item>
                    </a-col>
                    <a-col :span="12">
                      <a-form-model-item
                        label="联系电话"
                        prop="consignorPhone"
                        style="margin-top:84px;"
                      >
                        <a-input v-model="form.consignorPhone" :max-length="20" />
                      </a-form-model-item>
                    </a-col>
                  </a-row>
                </div>
                <!-- 目的信息 -->
                <div class="border">
                  <a-row>
                    <a-col :span="3" class="YunSHU">
                      <img src="@@/images/icon-end.png" alt style="margin-bottom:8px;" />
                      <div>目的信息</div>
                    </a-col>
                    <a-col :span="9">
                      <a-form-model-item label="目的港" prop="endPortId">
                        <!-- <a-select v-model="form.endPortId">
                          <a-select-option value>请选择</a-select-option>
                          <a-select-option
                            v-for="(item,index) in portList"
                            :key="index"
                            :value="item.id"
                          >{{item.name}}</a-select-option>
                        </a-select>-->
                        <a-select
                          show-search
                          :show-arrow="false"
                          :filter-option="false"
                          :default-active-first-option="false"
                          :not-found-content="null"
                          v-model="form.endPortId"
                          @search="endPortChange"
                          @select="portListReset"
                        >
                          <a-select-option key>请选择</a-select-option>
                          <a-select-option v-for="d in endPortList" :key="d.id">{{ d.name }}</a-select-option>
                        </a-select>
                      </a-form-model-item>
                      <a-form-model-item label="联系人" prop="consignee" style="margin-top:44px;">
                        <a-input v-model="form.consignee" :max-length="10" />
                      </a-form-model-item>
                    </a-col>
                    <a-col :span="12">
                      <a-form-model-item label="收货地址" prop="consigneeProvince">
                        <a-cascader
                          :options="options"
                          v-if="form.consigneeProvince"
                          :default-value="[form.consigneeProvince, form.consigneeCity, form.consigneeArea]"
                          :fieldNames="{label: 'area', value: 'area', children: 'childList'}"
                          placeholder="请选择省/市/区县"
                          @change="onChange2"
                        />
                      </a-form-model-item>
                      <a-form-model-item label="详细地址" prop="consigneeAddress">
                        <a-input v-model="form.consigneeAddress" :max-length="100" />
                      </a-form-model-item>
                      <a-form-model-item label="联系电话" prop="consigneePhone">
                        <a-input v-model="form.consigneePhone" :max-length="20" />
                      </a-form-model-item>
                    </a-col>
                  </a-row>
                </div>
              </div>
              <div v-else-if="shipOrderInfo.transportTerms=== 'CY-CY'" class="borderframe">
                <!-- 起运信息 -->
                <div class="border">
                  <a-row>
                    <a-col :span="3" class="YunSHU">
                      <img src="@@/images/icon-start.png" alt style="margin-bottom:8px;" />
                      <div>起运信息</div>
                    </a-col>
                    <a-col :span="9">
                      <a-form-model-item label="起运港" prop="startPortId">
                        <!-- <a-select v-model="form.startPortId">
                          <a-select-option value>请选择</a-select-option>
                          <a-select-option
                            v-for="(item,index) in portList"
                            :key="index"
                            :value="item.id"
                          >{{item.name}}</a-select-option>
                        </a-select>-->
                        <a-select
                          show-search
                          :show-arrow="false"
                          :filter-option="false"
                          :default-active-first-option="false"
                          :not-found-content="null"
                          v-model="form.startPortId"
                          @search="startPortChange"
                          @select="portListReset"
                        >
                          <a-select-option key>请选择</a-select-option>
                          <a-select-option v-for="d in startPortList" :key="d.id">{{ d.name }}</a-select-option>
                        </a-select>
                      </a-form-model-item>
                      <a-form-model-item label="联系人" prop="consignor" style="margin-top:44px;">
                        <a-input v-model="form.consignor" :max-length="10" />
                      </a-form-model-item>
                    </a-col>
                    <a-col :span="12">
                      <a-form-model-item
                        label="联系电话"
                        prop="consignorPhone"
                        style="margin-top:84px;"
                      >
                        <a-input v-model="form.consignorPhone" :max-length="20" />
                      </a-form-model-item>
                    </a-col>
                  </a-row>
                </div>
                <!-- 目的信息 -->
                <div class="border">
                  <a-row>
                    <a-col :span="3" class="YunSHU">
                      <img src="@@/images/icon-end.png" alt style="margin-bottom:8px;" />
                      <div>目的信息</div>
                    </a-col>
                    <a-col :span="9">
                      <a-form-model-item label="目的港" prop="endPortId">
                        <!-- <a-select v-model="form.endPortId">
                          <a-select-option value>请选择</a-select-option>
                          <a-select-option
                            v-for="(item,index) in portList"
                            :key="index"
                            :value="item.id"
                          >{{item.name}}</a-select-option>
                        </a-select>-->
                        <a-select
                          show-search
                          :show-arrow="false"
                          :filter-option="false"
                          :default-active-first-option="false"
                          :not-found-content="null"
                          v-model="form.endPortId"
                          @search="endPortChange"
                          @select="portListReset"
                        >
                          <a-select-option key>请选择</a-select-option>
                          <a-select-option v-for="d in endPortList" :key="d.id">{{ d.name }}</a-select-option>
                        </a-select>
                      </a-form-model-item>
                      <a-form-model-item label="联系人" prop="consignee" style="margin-top:44px;">
                        <a-input v-model="form.consignee" :max-length="10" />
                      </a-form-model-item>
                    </a-col>
                    <a-col :span="12">
                      <a-form-model-item label="收货人抬头" prop="consigneeTitle">
                        <a-input v-model="form.consigneeTitle" :max-length="50" />
                      </a-form-model-item>
                      <a-form-model-item
                        label="联系电话"
                        prop="consigneePhone"
                        style="margin-top:44px;"
                      >
                        <a-input v-model="form.consigneePhone" :max-length="20" />
                      </a-form-model-item>
                    </a-col>
                  </a-row>
                </div>
              </div>
            </template>
            <a-row>
              <a-col :span="15">
                <a-form-model-item label="销售备注" :label-col="{span:4}" :wrapper-col="{span:20}">
                  <span>{{shipOrderInfo.sellerRemark}}</span>
                </a-form-model-item>
                <a-form-model-item label="操作备注" :label-col="{span:4}" :wrapper-col="{span:20}">
                  <a-input
                    v-model="form.handlerRemark"
                    type="textarea"
                    :max-length="200"
                    :auto-size="{ minRows: 3, maxRows: 3 }"
                  />
                </a-form-model-item>
              </a-col>
            </a-row>
          </a-form-model>
        </a-card>
        <a-card :bordered="false" class="orderCenterAntCard">
          <div class="card-title">货物托运委托书</div>
          <viewer
            v-if="shipOrderInfo.contractPics"
            :images="shipOrderInfo.contractPics.split(',')"
            :options="{url: 'data-x'}"
          >
            <template v-for="(src,index) in shipOrderInfo.contractPics.split(',')">
              <img
                style="width:100px;height:100px;margin-right:10px; margin-bottom:10px; border:1px solid #eee"
                :src="`${src}?x-oss-process=image/resize,h_100`"
                :data-x="src"
                :key="index"
                v-if="src"
              />
            </template>
          </viewer>
        </a-card>
      </a-tab-pane>
      <a-tab-pane :key="2" tab="费用信息">
        <a-card :bordered="false" class="orderCenterAntCard">
          <div class="card-title">
            费用信息
            <a-button
              v-if="btnControl.queryPay"
              style="float:right;margin-right:28px"
              type="primary"
              @click="showFeeCalc"
            >费用小计</a-button>
          </div>
          <div class="feeTop" style="margin-right:25px;">
            <div class="iconTextMix">
              <img src="@@/images/icon-s.png" alt />
              <span>应收</span>
            </div>
            <a-button type="primary" v-if="shipOrderInfo.status != 5" @click="addFee(1)">+ 增加应收</a-button>
          </div>
          <div class="ddzx_fyxx">
            <a-table
              :columns="feeColumns"
              :data-source="receiveFeeList"
              bordered
              :pagination="false"
              :row-key="(record,index) => index"
              :row-class-name="(record, index) => index % 2 === 0 ? '' : 'redRpw'"
              style="margin: 0 25px;"
            >
              <template slot="customTitle">应收金额</template>
              <template slot="money" slot-scope="record">
                <span v-if="record.currencyType === 'CNY'">{{record.amount.toFixed(2)}}</span>
                <span v-else style="color:orange">$ {{record.amount.toFixed(2)}}</span>
              </template>
              <template slot="footer">
                <div :class="receiveFeeList.length % 2 === 0 ? 'whiteRpw' : 'whiteRpwe'">
                  <div style="text-align:right">
                    应收总金额：¥
                    <span style="font-size:26px;color:orange">{{totalReceiveFee.toFixed(2)}}</span>
                  </div>
                </div>
              </template>
              <span slot="do" slot-scope="record" :style="'display: flex; align-items: center;'">
                <a style="margin-right:10px" @click="history(record)">历史记录</a>
                <a @click="editFee(record, 1)">编辑</a>
              </span>
            </a-table>
          </div>
          <template v-if="btnControl.queryPay">
            <div class="feeTop" style="margin-top:30px; margin-right:25px;">
              <div class="iconTextMix">
                <img src="@@/images/icon-f.png" alt />
                <span>应付</span>
              </div>
              <a-button type="primary" v-if="shipOrderInfo.status != 5" @click="addFee(2)">+ 增加应付</a-button>
            </div>
            <div class="ddzx_fyxx">
              <a-table
                :columns="feeColumns"
                :data-source="payFeeList"
                bordered
                :pagination="false"
                :row-key="(record,index) => index"
                :row-class-name="(record, index) => index % 2 === 0 ? '' : 'redRpw'"
                style="margin: 0 25px;"
              >
                <template slot="customTitle">应付金额</template>
                <template slot="money" slot-scope="record">
                  <span v-if="record.currencyType === 'CNY'">{{record.amount.toFixed(2)}}</span>
                  <span v-else style="color:orange">$ {{record.amount.toFixed(2)}}</span>
                </template>
                <template slot="footer">
                  <div :class="payFeeList.length % 2 === 0 ? 'whiteRpw' : 'whiteRpwe'">
                    <div style="text-align:right">
                      应付总金额：¥
                      <span style="font-size:26px;color:orange">{{totalPayFee.toFixed(2)}}</span>
                    </div>
                  </div>
                </template>
                <span slot="do" slot-scope="record" :style="'display: flex; align-items: center;'">
                  <a style="margin-right:10px" @click="history(record)">历史记录</a>
                  <a
                    @click="editFee(record, 2)"
                    :style="record.cannotClick ? 'color:#666;cursor:auto' : ''"
                  >编辑</a>
                </span>
              </a-table>
            </div>
            <div class="feeTop" style="margin-top:30px">
              <div class="iconTextMix">
                <img src="@@/images/icon-f.png" alt />
                <span>毛利</span>
              </div>
            </div>
            <a-list class="calcList calcList_2" :grid="{ column: 4 }" style="margin-left：25px;">
              <a-list-item style="width:23.4%;">
                <a-card title="总应收">
                  ¥
                  <span class="moneyCss">{{totalReceiveFee.toFixed(2)}}</span>
                </a-card>
              </a-list-item>
              <a-list-item class="sale_yf" style="width:20.4%;">
                <a-card title="总应付">
                  ¥
                  <span class="moneyCss">{{totalPayFee.toFixed(2)}}</span>
                </a-card>
              </a-list-item>
              <a-list-item class="sale_ml" style="width:27%;">
                <a-card title="毛利">
                  ¥
                  <span class="moneyCss">{{(totalReceiveFee - totalPayFee).toFixed(2)}}</span>
                </a-card>
              </a-list-item>
            </a-list>
          </template>
        </a-card>
      </a-tab-pane>
      <a-tab-pane :key="3" tab="货物跟踪">
        <!-- 流转modal -->
        <flowDetail :visible="flowVisible" :flow="flow" @closeIt="dealFlowModal" />

        <a-card :bordered="false" class="orderCenterAntCard">
          <div class="card-title">货物跟踪</div>
          <a-row :gutter="[20]">
            <a-col :span="9">
              <div class="hangci_rzhi">
                <a-card title="流转信息">
                  <div
                    class="dp_ddgz"
                    :style="shipTrackList.length > 6 ? 'height:474px;overflow-y:scroll;margin:24px 0' : 'height:474px;margin:24px 0'"
                  >
                    <dl>
                      <template v-for="(item,index) in shipTrackList">
                        <dt :key="index">
                          {{item.createTime.split(" ")[0]}}
                          <br />
                          {{item.createTime.split(" ")[1]}}
                        </dt>
                        <dd
                          :key="'info-'+index"
                          :class="shipTrackList.length === 1 ? 'dp_ddgz_b' : index===0 ? 'dp_ddgz_t': index+1===shipTrackList.length ? 'dp_ddgz_b' : ''"
                        >
                          <h1>{{item.title}}</h1>
                          <template v-if="item.trackType === 2">
                            <!-- <p>陆运系统</p> -->
                            <div
                              :class="{errorClass: item.opeType===20||item.opeType===21}"
                              style="padding: 0 5px;"
                            >
                              <!-- <h1>{{opeTypeStr(item.opeType, item.emptyOrHeavy)}}</h1> -->
                              <span style="color: #b7b7b7">{{item.createTime}}</span>
                              <br />

                              <!-- 异常结束的类型需要显示异常结束的原因 -->
                              <small v-if="item.opeType===4">
                                原因：{{item.remark}}
                                <br />
                              </small>
                              <!-- 作废 -->
                              <small v-if="item.opeType===5">
                                原因：{{item.remark}}
                                <br />
                              </small>
                              <!-- 套箱接单的类型需要显示备注信息 -->
                              <small v-if="item.opeType===20">
                                {{item.remark}}
                                <br />
                              </small>
                              <!-- 送达门点 提箱、不提箱-->
                              <small
                                v-if="item.address&&item.address.addressType===1&&item.type===12"
                              >
                                {{item.address.portName}}
                                <br />
                              </small>
                              <small
                                v-if="item.address&&item.address.addressType===2&&item.type===12"
                              >
                                {{`${item.address.province}${item.address.city}${item.address.area}${item.address.address}`}}
                                <br />
                              </small>
                              <small v-if="item.type===12">
                                {{`${item.driverName ? item.address.linkMan : '--'} ${item.address ? item.address.linkManPhone : '--'}`}}
                                <br />
                              </small>
                              <small v-if="item.opeType===10">
                                司机：{{`${item.driverName || '--'} ${item.driverPhone || '--'}`}}
                                <br />
                                车辆：{{item.tractorNumber || '--'}}{{item.trailerNumber ? `·${item.trailerNumber}` : ''}}
                              </small>

                              <a
                                v-if="item.opeType===11||item.type===12||item.opeType===13||item.opeType===14||item.opeType===16||item.opeType===17||item.opeType===22||item.opeType===21||item.opeType===18"
                                @click="openFlowDetail(item)"
                              >查看详情</a>
                            </div>
                          </template>
                          <template v-else>
                            <p v-if="item.content && item.content!=='陆运系统'">
                              船名/航次：
                              <a-tooltip placement="rightTop">
                                <template slot="title">
                                  <span>{{item.content}}</span>
                                </template>
                                <span style="cursor:pointer">{{item.content}}</span>
                              </a-tooltip>
                            </p>
                            <p v-if="item.title === '海船动态'">海船起航日期：{{item.departureDate}}</p>
                            <p v-if="item.remark">
                              备注：
                              <a-tooltip placement="rightTop">
                                <template slot="title">
                                  <span>{{item.remark}}</span>
                                </template>
                                <span style="cursor:pointer">{{item.remark}}</span>
                              </a-tooltip>
                            </p>
                          </template>
                          <a @click="showModalPic(item.trackPics)" v-if="item.trackPics">查看图片</a>
                        </dd>
                      </template>
                    </dl>
                  </div>
                </a-card>
              </div>
            </a-col>
            <a-col :span="15" style="overflow-y:scroll">
              <a-card title="货物跟踪上报" style="min-height:580px">
                <a-button slot="extra" type="primary" @click="orderToLand">派单到陆运</a-button>
                <a-form-model
                  ref="trackForm"
                  :rules="trackRules"
                  :model="trackForm"
                  :label-col="{span:5}"
                  :wrapper-col="{span:16}"
                >
                  <a-form-model-item label="货物状态" prop="title" style="padding-top:85px;">
                    <a-select v-model="trackForm.title" @change="goodStatusChange">
                      <a-select-option value>请选择</a-select-option>
                      <a-select-option value="到目的港">到目的港</a-select-option>
                      <a-select-option value="到始发港">到始发港</a-select-option>
                      <a-select-option value="已完成">已完成</a-select-option>
                      <a-select-option value="驳船动态">驳船动态</a-select-option>
                      <a-select-option value="海船动态">海船动态</a-select-option>
                      <a-select-option value="其它">其它</a-select-option>
                    </a-select>
                  </a-form-model-item>
                  <a-form-model-item v-if="trackForm.title === '驳船动态'" label="船名/航次">
                    <a-input
                      :value="(shipOrderInfo.shipName || '--') + '/' + (shipOrderInfo.voyageNumber || '--')"
                      disabled
                      style="width:100%"
                    />
                  </a-form-model-item>
                  <a-form-model-item v-if="trackForm.title === '海船动态'" label="船名/航次" prop="content">
                    <!-- <a-input
                      v-model="trackForm.content"
                      :disabled="(shipOrderInfo.seagoingShipName && shipOrderInfo.seagoingShipVoyage) ? true : false"
                      style="width:100%"
                      :max-length="20"
                      placeholder="以 / 区分船名、航次"
                    />-->
                    <a-input
                      v-model="trackForm.content"
                      style="width:100%"
                      :max-length="20"
                      placeholder="以 / 区分船名、航次"
                    />
                  </a-form-model-item>
                  <a-form-model-item
                    v-if="trackForm.title === '海船动态'"
                    label="海船起航日期"
                    prop="departureDate"
                  >
                    <a-date-picker
                      :value="timeValue"
                      @change="shipTimeChange"
                      format="YYYY-MM-DD"
                      style="width:100%"
                    >
                      <a-icon slot="suffixIcon" type="calendar" />
                    </a-date-picker>
                  </a-form-model-item>
                  <a-form-model-item label="备注" prop="remark">
                    <a-input
                      v-model="trackForm.remark"
                      :max-length="200"
                      type="textarea"
                      :auto-size="{ minRows: 3, maxRows: 3 }"
                    />
                  </a-form-model-item>
                  <a-form-model-item v-if="trackForm.title === '已完成'" label="图片">
                    <!-- <a-form-model-item label="图片"> -->
                    <upload
                      :uploadName="'completePics'"
                      :fatherList="[]"
                      :length="9"
                      @uploadFile="completePics"
                    ></upload>
                  </a-form-model-item>
                </a-form-model>
                <div style=" text-align: center; padding-top:35px;">
                  <a-button ghost type="primary" :loading="btnStatus" @click="noNewInfo">无更新信息</a-button>
                  <a-button
                    type="primary"
                    :loading="btnStatus2"
                    @click="submitNewInfo"
                    style="margin-left:10px;"
                  >确认上报</a-button>
                </div>
              </a-card>
            </a-col>
          </a-row>
        </a-card>
      </a-tab-pane>
    </a-tabs>
    <!-- 费用信息 -->
    <a-modal
      v-model="addVisible"
      :title="isFeeModalEdit ? '编辑费用' : feeType === 1 ? '新增应收' : '新增应付'"
      :body-style="{padding:'40px 40px 20px 20px'}"
      :width="600"
      centered
      @cancel="cancelAdd"
      @ok="completeAdd"
      :confirm-loading="confirmLoading"
      destroyOnClose
    >
      <a-form-model
        ref="addForm"
        :rules="rules"
        :model="addForm"
        :label-col="{span:7}"
        :wrapper-col="{span:17}"
      >
        <!-- 选择费用类型 -->
        <a-form-model-item label="选择费用类型" prop="feetypeId" v-if="editFeeStatus">
          <a-select
            style="width:100%"
            show-search
            :show-arrow="false"
            :filter-option="false"
            :default-active-first-option="false"
            :not-found-content="null"
            v-model="addForm.feetypeId"
            @search="feeListChange"
            @change="feeTypeChange"
            @blur="restFeeList"
          >
            <a-select-option value>请选择</a-select-option>
            <a-select-option v-for="(v,k) in feeList" :key="k" :value="v.id">{{v.name}}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="选择费用类型" v-else>
          <a-input disabled :value="editFeeObj.feeName" />
        </a-form-model-item>
        <!-- 选择结算对象 -->
        <a-form-model-item v-if="feeShow" label="选择结算对象" prop="custId">
          <a-select
            style="width:100%"
            show-search
            :show-arrow="false"
            :filter-option="false"
            :default-active-first-option="false"
            not-found-content="请选择"
            v-model="addForm.custId"
            @search="onSearch"
            @blur="restCustList"
          >
            <a-select-option value>请选择</a-select-option>
            <a-select-option
              v-for="(record,index) in custList"
              :key="index"
              :value="record.id"
            >{{ record.name }}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="选择结算对象" v-else>
          <a-input disabled :value="shipOrderInfo.custName" />
        </a-form-model-item>
        <!-- 应收金额 -->
        <a-row>
          <a-col :span="18">
            <a-form-model-item
              :label="feeType === 1 ? '应收金额' : '应付金额'"
              prop="amount"
              :wrapperCol="{span:15}"
              :labelCol="{span:9}"
            >
              <a-input-number
                :min="0"
                :max="999999999999.99"
                :precision="2"
                v-model="addForm.amount"
                style="width:100%"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item prop="currencyType" :wrapperCol="{span:24}">
              <a-select v-model="addForm.currencyType" style="width:100%">
                <!-- <a-select-option key>请选择</a-select-option> -->
                <a-select-option v-for="v in moneyTypeArray" :key="v">{{v}}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
        <!-- 备注 -->
        <a-form-model-item label="备注" prop="remark">
          <a-input
            v-model="addForm.remark"
            type="textarea"
            :max-length="200"
            :auto-size="{ minRows: 3, maxRows: 3 }"
          />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
    <!-- 派单到陆运 -->
    <a-modal
      title="派单到陆运系统"
      width="600px"
      centered
      :visible="landVisible"
      @ok="landOk"
      @cancel="landCancel"
      :confirm-loading="confirmLoading2"
    >
      <a-form-model
        ref="landForm"
        :rules="landRules"
        :model="landForm"
        :label-col="{span:6}"
        :wrapper-col="{span:15}"
      >
        <a-form-model-item label="是否加急" prop="isUrgent">
          <a-select v-model="landForm.isUrgent">
            <a-select-option value>请选择</a-select-option>
            <a-select-option :value="0">普通</a-select-option>
            <a-select-option :value="1">加急</a-select-option>
          </a-select>
        </a-form-model-item>
        <!-- <a-form-model-item label="要求送达日期" prop="requiredArriveTime">
          <a-date-picker
            :value="loadingTime"
            @change="landTimeChange"
            :show-time="{ format: 'HH:mm' }"
            format="YYYY-MM-DD HH:mm"
            style="width:100%"
          >
            <a-icon slot="suffixIcon" type="calendar" />
          </a-date-picker>
        </a-form-model-item>-->
        <a-form-model-item label="备注" prop="handlerRemark">
          <a-input
            v-model="landForm.handlerRemark"
            :max-length="200"
            type="textarea"
            :auto-size="{ minRows: 6, maxRows: 6 }"
          />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
    <!-- 费用历史 -->
    <a-modal
      title="历史记录"
      width="1000px"
      centered
      :visible="historyVisible"
      :footer="null"
      @cancel="historyCancel"
    >
      <a-table
        :columns="columnsLocal"
        :data-source="historyData"
        :row-key="record => record.id"
        :pagination="false"
      ></a-table>
    </a-modal>
    <!-- 费用小计 -->
    <a-modal
      title="费用小计"
      width="600px"
      centered
      :visible="feeCalcVisible"
      :footer="null"
      @cancel="feeCalcCancel"
    >
      <a-table
        :columns="feeCalcColumns"
        :data-source="feeCalcData"
        :row-key="record => record.id"
        :pagination="false"
      ></a-table>
    </a-modal>
    <!-- 查看记载图 -->
    <a-modal
      v-model="showPic"
      title="查看图片"
      :footer="null"
      width="380px"
      centered
      @cancel="closePicModal"
      destoryOnClose
    >
      <viewer v-if="picArray.length > 0" :images="picArray" :options="{url: 'data-x'}">
        <template v-for="(src,index) in picArray">
          <img
            class="modalPicItem"
            :src="`${src}?x-oss-process=image/resize,h_100`"
            :data-x="src"
            :key="index"
            v-if="src"
          />
        </template>
      </viewer>
      <a-empty v-else />
    </a-modal>
  </div>
</template>
<script>
// import { mixin } from '@/page/landCenter/orderManagement/common'
import { mixin } from '@/common/common'
import flowDetail from '@/page/landCenter/orderManagement/orderFlowDetailModal'
import {
  queryPortNameList,
  queryHolderNameList,
  queryBaseAreaList,
  queryFeeTypeList,
  queryCustNameList
} from '@/api'
import {
  getShipOrderById,
  editShipOrder,
  queryShipOrderCostList,
  addBillCost,
  queryShipOrderTrackList,
  addShipOrderTrack,
  ignoreShipOrderTrack,
  dispatchShipOrder,
  updateCostRecordStatus,
  editBillCost,
  queryHistoryCostList,
  queryCostSubTotal,
  queryIsExistContainerNoByParam
} from '@/api/orderCenter'
import _ from 'lodash/debounce'
import moment from 'moment'
import upload from '@/components/UpLoad'
import 'viewerjs/dist/viewer.css'
const feeColumns = [
  {
    title: '费用类型',
    width: 200,
    dataIndex: 'feeName'
  },
  {
    // title: '应收金额（元）',
    slots: { title: 'customTitle' },
    width: 200,
    scopedSlots: {
      customRender: 'money'
    }
  },
  {
    title: '结算对象',
    dataIndex: 'custName'
  },
  {
    title: '备注',
    customRender: record => {
      return `${record.createTime} ${record.operator ? record.operator : ''}\n${record.remark ? '备注：' + record.remark : ''}`
    },
    ellipsis: true,
    width: 200
  },
  {
    title: '操作',
    width: 120,
    scopedSlots: {
      customRender: 'do'
    }
  }
]
const formMessage = `必填项不能为空`
export default {
  mixins: [mixin],
  props: ['id'],
  components: {
    upload,
    flowDetail
  },
  // mixins: [mixin],
  data () {
    this.onSearch = _(this.onSearch, 800)
    this.startPortChange = _(this.startPortChange, 800)
    this.endPortChange = _(this.endPortChange, 800)
    this.feeListChange = _(this.feeListChange, 800)
    const columnsLocal = [
      {
        title: '操作时间',
        dataIndex: 'createTime',
        customRender: (text, record, index) => {
          if (index === 0) {
            return (
              <div>
                {text}
                <span class="redMsg">最新记录</span>
              </div>
            )
          }
          return text
        }
      },
      {
        title: '操作人',
        dataIndex: 'operator'
      },
      {
        title: '费用类型',
        dataIndex: 'feeName'
      },
      {
        title: '金额',
        dataIndex: 'amount',
        customRender: (text, record, index) => {
          if (record.currencyType === 'CNY') {
            return <div>{text}</div>
          } else {
            return <div style="color:orange">${text}</div>
          }
        }
      },
      {
        title: '结算对象',
        dataIndex: 'custName',
        width: 220,
        ellipsis: true
      },
      {
        title: '备注',
        dataIndex: 'remark',
        width: 260,
        ellipsis: true
      }
    ]
    const feeCalcColumns = [
      {
        title: '结算对象',
        dataIndex: 'custName'
      },
      {
        title: '应收费用(元)',
        dataIndex: 'receivableAmount',
        customRender: (text, record, index) => {
          if (record.currencyType === 'CNY') {
            return <div>{text}</div>
          } else {
            return <div style="color:orange">${text}</div>
          }
        }
      },
      {
        title: '应付费用(元)',
        dataIndex: 'payableAmount',
        customRender: (text, record, index) => {
          if (record.currencyType === 'CNY') {
            return <div>{text}</div>
          } else {
            return <div style="color:orange">${text}</div>
          }
        }
      }
    ]
    return {
      editFeeObj: {},
      editFeeStatus: true,
      basePath: '/orderCenter',
      routes: [
        {
          path: '/orderManage',
          breadcrumbName: '订单管理'
        },
        {
          path: '',
          breadcrumbName: '订单详情'
        }
      ],
      currentTab: 1,
      // portList: [],
      startPortList: [],
      endPortList: [],
      holderList: [],
      options: [],
      shipOrderInfo: {},
      labelCol: { span: 8 },
      wrapperCol: { span: 16 },
      pageNum: 1,
      pageSize: 10,
      loading: true,
      orderStatus: true,
      inputValue: '',
      form: {
        id: '',
        containerNo: '', // 箱号
        containerSealNo: '', // 封号
        seagoingShipName: '', // 海船名称
        seagoingShipVoyage: '', // 海船航次
        seagoingShipOrderCode: '', // 运单号
        goodsWeight: '', // 货重（吨）
        holderId: '', // 持箱人id
        consignor: '', // 发货联系人
        consignorPhone: '', // 发货联系电话
        startPortId: '', // 起运港id
        startPortName: '', // 起运港
        consignorProvince: '', // 发货地址 省
        consignorCity: '', // 发货地址 市
        consignorArea: '', // 发货地址 区
        consignorAddress: '', // 发货地址 详细地址
        consignee: '', // 收货联系人
        consigneePhone: '', // 收货联系电话
        endPortId: '', // 收货目的港id
        endPortName: '', // 收货目的港
        consigneeProvince: '', // 收货地址 省
        consigneeCity: '', // 收货地址 市
        consigneeArea: '', // 收货地址 区
        consigneeAddress: '', // 收货地址 详细地址
        consigneeTitle: '', // 收货人抬头
        loadingTime: '', // 装货时间
        departureDate: '',
        handlerRemark: '' // 操作信息
      },
      rules: {
        startPortId: [
          { required: true, message: formMessage, trigger: ['blur', 'change'] }
        ],
        consignor: [{ required: true, message: formMessage, trigger: 'blur' }],
        consignorProvince: [
          { required: true, message: formMessage, trigger: ['blur', 'change'] }
        ],
        consignorAddress: [
          { required: true, message: formMessage, trigger: 'blur' }
        ],
        consignorPhone: [
          { required: true, message: formMessage, trigger: 'blur' }
        ],
        endPortId: [
          { required: true, message: formMessage, trigger: ['blur', 'change'] }
        ],
        consignee: [{ required: true, message: formMessage, trigger: 'blur' }],
        consigneeProvince: [
          { required: true, message: formMessage, trigger: ['blur', 'change'] }
        ],
        consigneeAddress: [
          { required: true, message: formMessage, trigger: 'blur' }
        ],
        consigneePhone: [
          { required: true, message: formMessage, trigger: 'blur' }
        ],
        consigneeTitle: [
          { required: true, message: formMessage, trigger: 'blur' }
        ],
        feetypeId: [
          { required: true, message: formMessage, trigger: ['blur', 'change'] }
        ],
        custId: [
          { required: true, message: formMessage, trigger: ['blur', 'change'] }
        ],
        loadingTime: [{ required: true, message: formMessage, trigger: ['blur', 'change'] }],
        amount: [{ required: true, message: formMessage, trigger: 'blur' }],
        currencyType: [
          { required: true, message: formMessage, trigger: 'blur' }
        ]
      },
      trackRules: {
        title: [
          { required: true, message: formMessage, trigger: ['blur', 'change'] }
        ],
        content: [{ required: true, message: formMessage, trigger: 'blur' }],
        remark: [{ required: true, message: formMessage, trigger: 'blur' }],
        departureDate: [{ required: true, message: formMessage, trigger: 'change' }]
      },
      landRules: {
        isUrgent: [{ required: true, message: formMessage, trigger: ['blur', 'change'] }],
        requiredArriveTime: [{ required: true, message: formMessage, trigger: ['blur', 'change'] }],
        handlerRemark: [
          { required: true, message: formMessage, trigger: ['blur'] }
        ]
      },
      changePortStatus: false,
      feeColumns,
      payFeeList: [],
      totalPayFee: 0,
      receiveFeeList: [],
      totalReceiveFee: 0,
      addVisible: false,
      feeType: undefined, // 1应收、2应付
      feeList: [],
      custList: [],
      addForm: {
        custId: '',
        feetypeId: '',
        feeType: '',
        amount: '',
        currencyType: 'CNY',
        remark: ''
      },
      feeShow: true,
      shipTrackList: [],
      trackForm: {
        title: '',
        content: '',
        remark: '',
        departureDate: '', // 启航日期 海船动态
        completePics: '' // 完成图片 已完成
      },
      // 派单到陆运
      landVisible: false,
      landForm: {
        isUrgent: '',
        requiredArriveTime: '',
        handlerRemark: ''
      },
      moneyTypeArray: [],
      btnControl: {},
      portList: [],
      feeChangeStatus: false,
      isFeeModalEdit: false,
      editId: '',
      historyVisible: false,
      historyData: [],
      columnsLocal,
      feeCalcVisible: false,
      feeCalcColumns,
      feeCalcData: [],
      feeCalcReceive: 0,
      feeCalcPay: 0,
      confirmLoading: false,
      confirmLoading2: false,
      btnStatus: false,
      btnStatus2: false,
      showPic: false,
      picArray: [],
      timeValue: '',
      loadingTime: '',
      // land flow
      flowVisible: false,
      flow: {},
      // 订单信息是否可以保存（箱号）
      canSave: true
    }
  },
  methods: {
    completePics (e) {
      this.trackForm.completePics = e
    },
    shipTimeChange (date, dateString) {
      this.timeValue = date
      this.trackForm.departureDate = dateString
    },
    showModalPic (e) {
      let voyagePics = e ? e.split(',') : []
      // console.log(voyagePics)
      this.picArray = voyagePics
      this.showPic = true
    },
    closePicModal () {
      this.showPic = false
    },
    restFeeList () {
      this.feeTypeRequest({
        status: 1,
        belongCompany: 'JIA_HUA',
        feeType: this.feeType
      })
    },
    restCustList () {
      let param = {
        status: 1,
        belongCompany: 'JIA_HUA',
        custTypeLike: 'SUPPLIER'
      }
      if (this.feeType === 1) {
        param.isReceivable = 1
      } else {
        param.isPayable = 1
      }
      this.custListRequest(param)
    },
    queryCostSubTotalRequest (e) {
      queryCostSubTotal(e).then(res => {
        // // console.log(res.data)
        let feeCalcReceive = 0
        let feeCalcPay = 0
        let list = res.data
        if (list.length > 0) {
          list.forEach(v => {
            feeCalcReceive += v.cnyReceivableAmount
            feeCalcPay += v.cnyPayableAmount
          })
        }
        this.feeCalcReceive = feeCalcReceive
        this.feeCalcPay = feeCalcPay
        let lastRow = {
          custName: '总计',
          currencyType: 'CNY',
          receivableAmount: feeCalcReceive,
          payableAmount: feeCalcPay
        }
        list.push(lastRow)
        this.feeCalcData = list
      })
    },
    showFeeCalc () {
      this.feeCalcVisible = true
      this.queryCostSubTotalRequest({
        id: this.id,
        businessType: 'JIA_HUA_ORDER'
      })
    },
    feeCalcCancel () {
      this.feeCalcVisible = false
    },
    queryHistoryCostListRequest (e) {
      queryHistoryCostList(e).then(res => {
        // // console.log(res.data)
        this.historyData = res.data
      })
    },
    history (e) {
      // // console.log(e)
      this.historyVisible = true
      this.queryHistoryCostListRequest({
        id: e.id
      })
    },
    historyCancel () {
      this.historyVisible = false
    },
    editFee (e, type) {
      // console.log(e.feeName)
      // console.log(type)
      if (e.cannotClick) {
        return false
      }
      let param = {
        status: 1,
        belongCompany: 'JIA_HUA',
        custTypeLike: 'SUPPLIER'
      }
      if (type === 1) {
        param.isReceivable = 1
        if (!this.btnControl.editReceivable) {
          this.$message.error('您无此权限！')
          return false
        }
      } else {
        param.isPayable = 1
        if (!this.btnControl.editPay) {
          this.$message.error('您无此权限！')
          return false
        }
      }
      this.custListRequest(param)
      this.isFeeModalEdit = true
      this.feeType = type
      this.editId = e.id
      if (e.feeName === '应收客户' || e.feeName === '应付客户') {
        this.feeShow = false
        this.editFeeStatus = false
        // this.$refs.addForm.clearValidate('custId')
        // this.$refs.addForm.clearValidate('feetypeId')
        this.addForm.custId = this.shipOrderInfo.custId
        this.editFeeObj = e
        this.addForm = {
          custId: this.shipOrderInfo.custId,
          feetypeId: e.feeTypeId,
          feeType: e.feeType,
          amount: e.amount,
          currencyType: e.currencyType,
          remark: e.remark
        }
        // this.feeTypeRequest(
        //   {
        //     status: 1,
        //     belongCompany: 'JIA_HUA',
        //     feeType: type
        //   },
        //   true
        // )
      } else {
        this.feeShow = true
        this.editFeeStatus = true
        this.addForm = {
          custId: e.custId,
          feetypeId: e.feeTypeId,
          feeType: e.feeType,
          amount: e.amount,
          currencyType: e.currencyType,
          remark: e.remark
        }
        // this.feeTypeRequest({
        //   status: 1,
        //   belongCompany: 'JIA_HUA',
        //   feeType: type
        // })
      }
      this.feeTypeRequest(
        {
          status: 1,
          belongCompany: 'JIA_HUA',
          feeType: type
        },
        true,
        e.feeName
      )
      setTimeout(() => {
        this.addVisible = true
      }, 200)
    },
    editBillCostRequest (e) {
      editBillCost(e)
        .then(res => {
          this.$message.success('修改成功！')
          this.payFeeList = []
          this.receiveFeeList = []
          this.shipCostRequest({
            id: this.id,
            businessType: 'JIA_HUA_ORDER'
          })
          setTimeout(() => {
            this.confirmLoading = false
            this.cancelAdd()
          }, 500)
        })
        .catch(rs => {
          this.confirmLoading = false
        })
    },
    updateCostRecordStatusRequest (e) {
      updateCostRecordStatus(e).then(res => {
        // // console.log(res)
        this.$message.success('费用状态修改成功！')
        this.shipOrderDetailRequest({ id: this.id })
        setTimeout(() => {
          this.feeChangeStatus = false
        }, 100)
      })
    },
    feeChange () {
      // if (!this.btnControl.editCostRecorded) {
      //   this.$message.error('您无此权限！')
      //   return false
      // }
      this.feeChangeStatus = true
      // // console.log('订单id----' + this.id)
      // // console.log('状态' + this.shipOrderInfo.isCostRecorded)
      this.updateCostRecordStatusRequest({
        id: this.id,
        isCostRecorded: this.shipOrderInfo.isCostRecorded
      })
    },
    momentDate (date, format) {
      return moment(date)
    },
    getPopupContainer (trigger) {
      return trigger.parentElement
    },
    tabChange (activeKey) {
      this.pageNum = 1
      this.pageSize = 10
      this.currentTab = activeKey
      if (activeKey === 1) {
        this.shipOrderDetailRequest({ id: this.id })
        this.portListRequest(
          {
            status: 1
          },
          1,
          true
        )
        this.portListRequest(
          {
            status: 1
          },
          2,
          true
        )
        this.holderListRequest({})
        this.queryAddressRequest({})
      } else if (activeKey === 2) {
        this.receiveFeeList = []
        this.payFeeList = []
        this.shipCostRequest({
          id: this.id,
          businessType: 'JIA_HUA_ORDER'
        })
      } else if (activeKey === 3) {
        this.trackForm.title = ''
        this.shipTrackRequest({
          id: this.id
        })
      }
    },
    portListRequest (e, type, isNeed) {
      queryPortNameList(e)
        .then(res => {
          if (type === 1) {
            this.startPortList = res.data
          } else if (type === 2) {
            this.endPortList = res.data
          }
          if (isNeed) {
            this.portList = res.data
          }
        })
        .catch(rs => { })
    },
    startPortChange (e) {
      this.portListRequest(
        {
          nameLike: e,
          status: 1
        },
        1
      )
    },
    endPortChange (e) {
      this.portListRequest(
        {
          nameLike: e,
          status: 1
        },
        2
      )
    },
    portListReset () {
      this.portListRequest(
        {
          status: 1
        },
        1
      )
      this.portListRequest(
        {
          status: 1
        },
        2
      )
    },
    holderListRequest (e) {
      queryHolderNameList(e)
        .then(res => {
          this.holderList = res.data
        })
        .catch(rs => { })
    },
    queryAddressRequest () {
      queryBaseAreaList({})
        .then(res => {
          this.options = res.data
        })
        .catch(rs => { })
    },
    shipOrderDetailRequest (param) {
      getShipOrderById(param)
        .then(res => {
          // // console.log(res.data)
          this.shipOrderInfo = res.data
          let {
            containerNo,
            containerSealNo,
            seagoingShipName,
            seagoingShipVoyage,
            seagoingShipOrderCode,
            goodsWeight,
            holderId,
            consignor,
            consignorPhone,
            startPortId,
            startPortName,
            consignorProvince,
            consignorCity,
            consignorArea,
            consignorAddress,
            consignee,
            consigneePhone,
            endPortId,
            endPortName,
            consigneeProvince,
            consigneeCity,
            consigneeArea,
            consigneeAddress,
            consigneeTitle,
            loadingTime,
            departureDate,
            handlerRemark
          } = res.data
          this.form = {
            containerNo,
            containerSealNo,
            seagoingShipName,
            seagoingShipVoyage,
            seagoingShipOrderCode,
            goodsWeight,
            holderId,
            consignor,
            consignorPhone,
            startPortId,
            startPortName,
            consignorProvince,
            consignorCity,
            consignorArea,
            consignorAddress,
            consignee,
            consigneePhone,
            endPortId,
            endPortName,
            consigneeProvince,
            consigneeCity,
            consigneeArea,
            consigneeAddress,
            consigneeTitle,
            loadingTime,
            departureDate,
            handlerRemark
          }
          this.inputValue =
            this.form.seagoingShipName || this.form.seagoingShipVoyage
              ? this.form.seagoingShipName + '/' + this.form.seagoingShipVoyage
              : ''
        })
        .catch(rs => { })
    },
    editShipOrderRequest (e) {
      let _t = this
      editShipOrder(e)
        .then(res => {
          if (res.code === 0) {
            _t.$message.success('修改成功！')
            _t.shipOrderDetailRequest({ id: _t.id })
            _t.orderStatus = true
            setTimeout(() => {
              if (_t.changePortStatus) {
                _t.$confirm({
                  title:
                    '你修改了收发货地址信息，如果涉及到修改价格，请前往费用记录。',
                  onOk () {
                    _t.currentTab = 2
                  },
                  onCancel () { }
                })
              }
            }, 200)
          }
        })
        .catch(rs => { })
    },
    shipCostRequest (e) {
      queryShipOrderCostList(e)
        .then(res => {
          let list = res.data
          let calcR = 0
          let calcP = 0
          list.forEach(i => {
            if (i.feeType === 1) {
              this.receiveFeeList.push(i)
              calcR += i.cnyAmount
            } else {
              this.payFeeList.push(i)
              calcP += i.cnyAmount
            }
          })
          // console.log(this.receiveFeeList)

          for (let i = 0; i < this.payFeeList.length; i++) {
            if ((this.payFeeList)[i].feeName === '应付海船费用') {
              (this.payFeeList)[i].cannotClick = true
              break
            }
          }
          // console.log(this.payFeeList)
          this.totalReceiveFee = calcR
          this.totalPayFee = calcP
          // this.totalFeeList = list
        })
        .catch(rs => { })
    },
    feeTypeRequest (e, isNeed, feeName) {
      queryFeeTypeList(e)
        .then(res => {
          // console.log(res.data)
          this.feeList = res.data
          if (isNeed) {
            let moneyTypeArray = []
            res.data.forEach(v => {
              // if (v.name === '应收客户' || v.name === '应付客户') {
              //   moneyTypeArray = v.currencyType.split(',')
              // }
              if (v.name === feeName) {
                moneyTypeArray = v.currencyType.split(',')
              }
            })
            this.moneyTypeArray = moneyTypeArray
          }
        })
        .catch(rs => { })
    },
    feeListChange (e) {
      this.feeTypeRequest({
        nameLike: e,
        status: 1,
        belongCompany: 'JIA_HUA',
        feeType: this.feeType
      })
    },
    addFeeRequest (e) {
      addBillCost(e)
        .then(res => {
          if (res.code === 0) {
            this.$message.success('添加成功！')
            this.payFeeList = []
            this.receiveFeeList = []
            this.shipCostRequest({
              id: this.id,
              businessType: 'JIA_HUA_ORDER'
            })
            setTimeout(() => {
              this.confirmLoading = false
              this.cancelAdd()
            }, 500)
          }
        })
        .catch(rs => {
          this.confirmLoading = false
        })
    },
    custListRequest (e) {
      queryCustNameList(e)
        .then(res => {
          this.custList = res.data
        })
        .catch(rs => { })
    },
    shipTrackRequest (e) {
      queryShipOrderTrackList(e)
        .then(res => {
          // // console.log(res.data)
          this.shipTrackList = res.data
        })
        .catch(rs => { })
    },
    addShipTrackRequest (e) {
      this.btnStatus2 = true
      addShipOrderTrack(e)
        .then(res => {
          if (res.code === 0) {
            this.$message.success('上报成功！')
            this.trackForm = {
              title: '',
              content: '',
              remark: '',
              departureDate: '',
              completePics: ''
            }
            this.shipTrackRequest({
              id: this.id
            })
            setTimeout(() => {
              this.btnStatus2 = false
            }, 1000)
          }
        })
        .catch(rs => {
          this.btnStatus2 = false
        })
    },
    ignoreShipTrackRequest (e) {
      ignoreShipOrderTrack(e)
        .then(res => {
          if (res.code === 0) {
            this.$message.success('上报成功！')
            this.$refs.trackForm.resetFields()
            this.shipTrackRequest({
              id: this.id
            })
            setTimeout(() => {
              this.btnStatus = false
            }, 1000)
          }
        })
        .catch(rs => {
          this.btnStatus = false
        })
    },
    orderToLandRequest (e) {
      dispatchShipOrder(e)
        .then(res => {
          if (res.code === 0) {
            this.$message.success('派单成功！')
            setTimeout(() => {
              this.landCancel()
              this.confirmLoading2 = false
            }, 500)
          }
        })
        .catch(rs => {
          this.confirmLoading2 = false
        })
    },
    company (id) {
      window.open(`/salesCenter/customManage/${id}`, '_blank')
    },
    onChange (value, selectedOptions) {
      this.form.consignorProvince = value[0]
      this.form.consignorCity = value[1]
      this.form.consignorArea = value[2]
    },
    onChange2 (value, selectedOptions) {
      this.form.consigneeProvince = value[0]
      this.form.consigneeCity = value[1]
      this.form.consigneeArea = value[2]
    },
    loadingTimeChange (date, dateString) {
      this.form.loadingTime = dateString
    },
    departureDateChange (date, dateString) {
      this.form.departureDate = dateString
    },
    editOrder () {
      if (!this.btnControl.edit) {
        this.$message.error('您无此权限！')
        return false
      }
      this.orderStatus = false
      let startPortStaus
      let endPortStatus
      let startPortId = this.form.startPortId
      let endPortId = this.form.endPortId
      let portList = this.portList
      for (let i = 0; i < portList.length; i++) {
        if (startPortId === portList[i].id) {
          startPortStaus = true
          break
        } else {
          startPortStaus = false
        }
      }
      for (let j = 0; j < portList.length; j++) {
        if (endPortId === portList[j].id) {
          endPortStatus = true
          break
        } else {
          endPortStatus = false
        }
      }
      // // console.log(this.portList)
      // // console.log(startPortId)
      // // console.log(endPortId)
      if (startPortStaus === false) {
        this.form.startPortId = ''
      }
      if (endPortStatus === false) {
        this.form.endPortId = ''
      }
    },
    cancelSave () {
      this.orderStatus = true
    },
    checkContainerNoIsExist () {
      let containerNo = this.form.containerNo.toUpperCase().replace(/[^a-zA-Z0-9]/g, '')
      let orderShipId = this.id
      this.form.containerNo = containerNo
      console.log(containerNo)
      queryIsExistContainerNoByParam({
        containerNo: containerNo,
        orderShipId: orderShipId
      }).then(res => {
        if (res.data.isExist) {
          this.canSave = false
          this.$message.error(`箱号${containerNo}已存在！`)
          return false
        } else {
          this.canSave = true
        }
      })
    },
    saveOrder () {
      if (!this.canSave) {
        this.$message.error(`箱号${this.form.containerNo}已存在！`)
        return false
      }
      if (
        !(
          this.form.endPortId === this.shipOrderInfo.endPortId &&
          this.form.startPortId === this.shipOrderInfo.startPortId
        )
      ) {
        this.changePortStatus = true
      } else {
        this.changePortStatus = false
      }
      // // console.log(this.inputValue)
      // if (this.inputValue) {
      this.form.seagoingShipName = this.inputValue.split('/')[0] || ''
      this.form.seagoingShipVoyage = this.inputValue.split('/')[1] || ''
      let containerNo = this.form.containerNo
      let containerSealNo = this.form.containerSealNo
      let seagoingShipOrderCode = this.form.seagoingShipOrderCode
      if (containerNo) {
        // this.form.containerNo = containerNo.replace(/\s*/g, '')
        this.form.containerNo = containerNo.toUpperCase().replace(/[^a-zA-Z0-9]/g, '')
      }
      if (containerSealNo) {
        this.form.containerSealNo = containerSealNo.replace(/\s*/g, '')
      }
      if (seagoingShipOrderCode) {
        this.form.seagoingShipOrderCode = seagoingShipOrderCode.replace(/\s*/g, '')
      }
      // if (this.form.goodsWeight === null) {
      //   this.form.goodsWeight = ''
      // }
      // }
      // // console.log(this.form)
      this.$refs.form.validate(valid => {
        if (valid) {
          this.editShipOrderRequest({
            ...this.form,
            id: this.id
          })
        }
      })
    },
    feeTypeChange (value) {
      let targetKey
      this.addForm.currencyType = ''
      this.feeList.forEach((v, k) => {
        if (v.id === value) {
          targetKey = k
        }
      })
      this.moneyTypeArray = this.feeList[targetKey].currencyType.split(',')
      this.addForm.currencyType = this.moneyTypeArray[0]
      // // console.log(value)
      // // console.log(this.moneyTypeArray)
      let feeName = ''
      this.feeList.forEach(v => {
        if (value === v.id) {
          feeName = v.name
        }
      })
      if (feeName === '应收客户' || feeName === '应付客户') {
        this.feeShow = false
        this.$refs.addForm.clearValidate('custId')
        this.addForm.custId = this.shipOrderInfo.custId
      } else {
        this.feeShow = true
        this.addForm.custId = ''
      }
    },
    addFee (e) {
      // // console.log(e)
      if (e === 1) {
        if (!this.btnControl.addReceivable) {
          this.$message.error('您无此权限！')
          return false
        }
      } else if (e === 2) {
        if (!this.btnControl.addPay) {
          this.$message.error('您无此权限！')
          return false
        }
      }
      this.isFeeModalEdit = false
      this.feeType = e
      this.addForm.feeType = e
      this.feeTypeRequest({
        status: 1,
        belongCompany: 'JIA_HUA',
        feeType: e
      })
      let param = {
        status: 1,
        belongCompany: 'JIA_HUA',
        custTypeLike: 'SUPPLIER'
      }
      if (e === 1) {
        param.isReceivable = 1
      } else {
        param.isPayable = 1
      }
      this.custListRequest(param)
      setTimeout(() => {
        this.addVisible = true
      }, 100)
    },
    onSearch (searchText) {
      let param = {
        status: 1,
        nameLike: searchText,
        belongCompany: 'JIA_HUA',
        custTypeLike: 'SUPPLIER'
      }
      if (this.feeType === 1) {
        param.isReceivable = 1
      } else {
        param.isPayable = 1
      }
      this.custListRequest(param)
    },
    onSelect (val, option) {
      this.addForm.custId = this.custList[option.key].id
    },
    completeAdd () {
      let _t = this
      _t.$refs.addForm.validate(valid => {
        if (valid) {
          _t.confirmLoading = true
          if (_t.isFeeModalEdit) {
            this.editBillCostRequest({
              ..._t.addForm,
              businessId: _t.id,
              id: _t.editId
            })
          } else {
            _t.addFeeRequest({
              ..._t.addForm,
              businessId: _t.id
            })
          }
        }
      })
    },
    cancelAdd () {
      this.addVisible = false
      this.custList = []
      this.feeShow = true
      this.editFeeStatus = true
      // this.$refs.addForm.resetFields()
      this.addForm = {
        custId: '',
        feetypeId: '',
        feeType: '',
        amount: '',
        currencyType: 'CNY',
        remark: ''
      }
    },
    orderToLand () {
      if (!this.btnControl.dispatch) {
        this.$message.error('您无此权限！')
        return false
      }
      this.landVisible = true
      this.landForm.requiredArriveTime = this.shipOrderInfo.loadingTime || ''
      this.loadingTime = this.shipOrderInfo.loadingTime ? moment(this.shipOrderInfo.loadingTime) : ''
    },
    landTimeChange (date, dateString) {
      this.loadingTime = date
      this.landForm.requiredArriveTime = dateString
    },
    landOk () {
      let _s = this
      _s.$refs['landForm'].validate(valid => {
        if (valid) {
          this.confirmLoading2 = true
          _s.orderToLandRequest({
            ..._s.landForm,
            orderShipIdList: [_s.id]
          })
        }
      })
    },
    landCancel () {
      this.$refs.landForm.resetFields()
      this.landVisible = false
    },
    noNewInfo () {
      if (!this.btnControl.trackingReporting) {
        this.$message.error('您无此权限！')
        return false
      }
      this.btnStatus = true
      this.ignoreShipTrackRequest({
        idList: [this.id]
      })
    },
    goodStatusChange (e) {
      // console.log(e)
      // console.log(this.shipOrderInfo)
      if (e === '驳船动态') {
        this.trackForm.content = this.shipOrderInfo.shipName + '/' + this.shipOrderInfo.voyageNumber
      } else if (e === '海船动态') {
        this.timeValue = this.shipOrderInfo.departureDate ? moment(this.shipOrderInfo.departureDate) : ''
        this.trackForm.departureDate = this.shipOrderInfo.departureDate || ''
        if (this.shipOrderInfo.seagoingShipName && this.shipOrderInfo.seagoingShipVoyage) {
          this.trackForm.content = this.shipOrderInfo.seagoingShipName + '/' + this.shipOrderInfo.seagoingShipVoyage
        } else {
          this.trackForm.content = ''
        }
      } else {
        this.trackForm.content = ''
      }
    },
    submitNewInfo () {
      let _t = this
      if (!_t.btnControl.trackingReporting) {
        _t.$message.error('您无此权限！')
        return false
      }
      _t.$refs.trackForm.validate(valid => {
        if (valid) {
          _t.addShipTrackRequest({
            ..._t.trackForm,
            orderShipIdList: [_t.id]
          })
        }
      })
    },
    openFlowDetail (v) {
      this.flow = {
        id: v.id,
        type: v.type,
        isLandCenterOrder: 1
      }
      this.flowVisible = true
    },
    dealFlowModal () {
      this.flowVisible = false
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.btnControl = this.$root._bc
      // console.log(this.$root._bc)
    })
    let _this = this
    // tab=1
    _this.form.id = _this.id
    _this.shipOrderDetailRequest({ id: _this.id })
    _this.portListRequest(
      {
        status: 1
      },
      1,
      true
    )
    _this.portListRequest(
      {
        status: 1
      },
      2,
      true
    )
    _this.holderListRequest({})
    _this.queryAddressRequest({})
    // tab=2
    _this.shipCostRequest({
      id: _this.id,
      businessType: 'JIA_HUA_ORDER'
    })
    // tab=3
    _this.shipTrackRequest({
      id: _this.id
    })
  }
}
</script>
<style lang="less" scoped>
.card-title {
  position: relative;
  padding-left: 16px;
  font-size: 18px;
  line-height: 1;
  color: #000;
  margin-bottom: 24px;
  &:before {
    content: '';
    width: 5px;
    height: 18px;
    background: #1890ff;
    border-radius: 4px;
    position: absolute;
    left: 0;
    top: -1px;
  }
}
.feeTop {
  display: flex;
  align-items: center;
  .iconTextMix {
    flex: 1;
    display: flex;
    align-items: center;
    justify-items: center;
    margin: 20px 0;
    padding-left: 24px;
    img {
      width: 25px;
      height: 25px;
    }
    span {
      font-size: 14px;
      margin-left: 10px;
      line-height: 25px;
      font-weight: bold;
    }
  }
}
.ant-card {
  .calcList {
    text-align: center;
    margin-left: 24px;
    span.moneyCss {
      color: orange;
      font-size: 24px;
      margin-left: 5px;
    }
  }
}
.calcList .ant-card {
  margin: 0;
}
/deep/ td {
  position: relative;
  .redMsg {
    position: absolute;
    display: inline-block;
    background: red;
    top: 0;
    width: 60px;
    left: 0;
    font-size: 12px;
    height: 16px;
    text-align: center;
    color: white;
  }
}
</style>
<style>
.modalPicItem {
  width: 100px;
  height: 100px;
  margin: 5px;
  border: 1px solid #eee;
  border-radius: 5px;
}
.calcList_2 .sale_yf .ant-card-bordered {
  border-left: none;
  border-right: none;
}
.calcList_2 .ant-card-head-title {
  padding: 5px 0;
  margin-top: 3px;
}
.calcList_2 .ant-card-head {
  padding: 0;
  background: #f0f0f0;
  min-height: 42px;
}
.calcList_2 .ant-card-head {
  border-top: 4px solid #cf1322;
}
.calcList_2 .sale_yf .ant-card-head {
  border-top: 4px solid #faad14;
}
.calcList_2 .sale_ml .ant-card-head {
  border-top: 4px solid #7cb305;
}
.calcList_2 .ant-card-body {
  padding: 16px 0;
}
.voyageDE {
  background: #fff;
  padding-bottom: 12px;
}
.voyageDETitle {
  padding: 0 24px;
  display: flex;
}
.voyageDETitle h3 {
  flex: 1;
  color: rgba(0, 0, 0, 0.85);
  font-weight: 600;
  font-size: 20px;
  line-height: 28px;
  height: 28px;
  margin-bottom: 20px;
}
.voyageDETitle h3 button {
  float: right;
}
.voyageDETitle h3 img {
  float: left;
  width: 28px;
  margin-right: 10px;
}
.chuanb .ant-tabs-nav-scroll {
  background: #fff;
  padding: 0 24px;
}
.ant-tabs-nav .ant-tabs-tab {
  font-size: 16px;
}
.ant-card.orderCenterAntCard {
  margin: 8px 24px 24px 24px;
}
.borderframe {
  border: 1px solid #f0f0f0;
  border-top: none;
  margin: 0 50px;
}
.border {
  padding: 24px;
  border-top: 1px solid #f0f0f0;
  border-radius: 4px;
}
.yewu_photo .ant-form-item {
  margin-bottom: 0;
}
.borderframe .ant-form-item {
  margin-bottom: 2px;
}
.YunSHU {
  display: flex;
  align-items: center;
  justify-items: center;
  flex-direction: column;
  padding: 15px 24px 15px 0;
  background: url(../../../static/images/border-r.png) no-repeat right;
  background-size: 1px 100%;
}
.dp_ddgz::-webkit-scrollbar-track {
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  background-color: #f2f2f2;
} /*外层轨道*/
.dp_ddgz::-webkit-scrollbar {
  width: 8px; /*设置滚动条样式*/
  height: 8px;
  background-color: #fff;
} /*滚动条整体部分，可以设置宽度啥的*/
.dp_ddgz::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: #c1c1c1;
} /*滚动的滑块 */
.hangci_rzhi .ant-card-bordered .ant-card-body {
  padding: 0px 0 0px 24px;
}
.ant-card-extra {
  padding: 0;
}
.ddzx_orderzt {
  text-align: right;
  margin-right: 24px;
}
.ddzx_orderzt .zte {
  margin-right: 3px;
}
.ddzx_orderzt .zted {
  color: #1890ff;
  float: right;
  font-size: 22px;
  margin-top: 4.5px;
  margin-left: 3px;
}
.ddzxdetail_de {
  padding-top: 8px;
}
.ddzxdetail_de .ant-descriptions-item-colon {
  float: left;
  width: 40%;
  text-align: right;
}
.ddzxdetail_de1 .ant-descriptions-item-colon {
  float: left;
  width: 13%;
  text-align: right;
}
.ddzx_xqxx .ant-form-item {
  margin-bottom: 8px;
  padding-right: 30px;
}
.ddzx_fyxx table tr th {
  text-align: center;
  padding: 12px;
  background: #f1f1f1;
}
.ddzx_fyxx table tr td {
  text-align: center;
  padding: 8px;
  height: 46px;
}
.ddzx_fyxx .ant-table-footer {
  padding: 0;
}
.redRpw {
  background: #fafafa;
}
.whiteRpw {
  padding: 12px 16px;
  background: #fff;
}
.whiteRpwe {
  padding: 12px 16px;
  background: #fafafa;
}
.dp_ddgz dl dd p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
</style>
